<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>订单列表</title>
  <link rel="stylesheet" href="../layui/css/layui.css" media="all">
</head>

<body>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">订单号</label>
    <div class="layui-input-inline">
      <input type="text" name="orderNo"  placeholder="请输入订单号" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">查询</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<table id="demo" lay-filter="test"></table>
 
<script src="../layui/layui.js"></script>
<script>
var goodsId = 0;
layui.use(['table','form','jquery'], function(){
  var table = layui.table;
  var form = layui.form;
  var $ = layui.jquery;
  
   
  
  //渲染表格
  table.render({
    elem: '#demo'
    ,height: 552
    ,url: 'AdminBaseOrderServlet?method=findAll' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
      {field: 'orderNo', title: '订单号',width:'25%'}
      ,{field: 'createTime', title: '下单时间',width:'12%'}
      ,{field: 'money', title: '金额',width:'8%'}
      ,{field: 'status', title: '状态',width:'8%',templet:function(d){
    	  switch(d.status){
    	  case 1:
    		  return '未付款'
    		  break;
    	  case 2:
    		  return '未发货'
    		  break;
    	  case 3:
    		  return '已发货'
    		  break;
    	  case 4:
    		  return '已收货'
    		  break;
    	  case 5:
    		  return '已取消'
    		  break;
    	  }
      }} 
      ,{field: 'address',width:'30%', title: '收货地址'}
      ,{field: 'waybill',width:'10%', title: '运单号'}
      ,{fixed: 'right', title: '操作', width:'7%', align:'center', toolbar: '#barDemo'}
    ]]
  });
  
//行工具条事件
  table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data; //获得当前行数据
    var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
    var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
   
    if(layEvent === 'send'){ //发货
    	$('#id').val(data.id)
    	layer.open({
   		  type: 1,
   		  title:'发货',
   		  content: $('#send') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
   		});
    } 
  });
  

  
//监听条件查询提交
  form.on('submit(formDemo)', function(data){
    //layer.msg(JSON.stringify(data.field));
    //表格重载
    table.reload('demo', {
		where: data.field //设定异步数据接口的额外参数
	});
    return false;
  });
  
  form.on('submit(sendBtn)', function(data){
	    //将数据提交到后台
	       $.post(
	    	'AdminBaseOrderServlet?method=send',
	    	data.field,
	    	function(res){
	    		layer.close(layer.index);//关闭弹窗
	    		table.reload('demo');//重载表格
	    		layer.msg('发货成功');
	    	},'text' 
	    );  
	    return false;
	  });
  
  
});
</script>
</body>

<form id="send"  class="layui-form" style="display: none" action="" lay-filter="send">
  <input type="hidden" id="id" name="id">
  <div class="layui-form-item">
    <label class="layui-form-label">运单号</label>
    <div class="layui-input-inline">
      <input type="text" name="waybill"  placeholder="请输入运单号" required="required" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="sendBtn">确定</button>
    </div>
  </div>
</form>

</html>
<!-- 行工具栏 -->
<script type="text/html" id="barDemo">
{{#  if(d.status == 2){ }}
  <a class="layui-btn  layui-btn-xs" lay-event="send">发货</a>
{{#  } }}
</script>
